<template>
    <div class="center">
        <!-- 头部 -->
        <div class="center-top">
            <div class="top-wrapper">
                <img class="top-left" :src="user.avatar" width="45" height="45">
                <div class="top-center">
                    <div class="phone" v-if="user.tel">{{user.tel}}</div>
                    <div class="text">我的手机号</div>
                </div>
                <router-link class="top-right" tag="div" :to="{name:'HsqAccount'}">
                    <i class="icon iconfont icon-setup"></i>
                </router-link>
            </div>
        </div>
        <!-- 中间列表页面 -->
        <div class="center-main">
            <ul>
                <router-link tag="div" :to="'/hsqlogin/hsqcenter/hsqlist'" class="item">
                    <i class="icon iconfont icon-tasklist front"></i>
                    <div class="text">订单列表</div>
                    <i class="icon iconfont icon-enter back"></i>
                </router-link>
                <router-link tag="div" :to="{name:'HsqHelp'}" class="item">
                    <i class="icon iconfont icon-service front"></i>
                    <div class="text">帮助中心</div>
                    <i class="icon iconfont icon-enter back"></i>
                </router-link>
            </ul>
        </div>
        <!-- 子路由出口 -->
        <router-view></router-view>

        <!-- 底部固定栏目 -->
        <bottom-bar></bottom-bar>
    </div>
</template>

<script>
import BottomBar from '../parts/bottomBar.vue'        //底部导航栏
import {mapMutations, mapGetters} from 'vuex'
export default {
    data() {
        return {}
    },
    computed: {
        // 获取vuex用户对象的电话
        ...mapGetters([
            'user'
        ])
    },
    components: {BottomBar},
    mounted() {
        //如果全局vuex用户对象电话不为空，那么直接跳转到登录页面
        if(this.user.tel==''){
            //页面跳转
            this.$router.push({path: '/hsqlogin'})
        }
    },
    methods: {

    },
    
}
</script>
<style  lang="less" scoped>
    @import "../../common/less/variable.less";
    .center{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        width:100%;
        //头部
        .center-top{
            padding:20px;
            background:@color-yellow;
            .top-wrapper{
                display:flex;
                .top-left{
                    flex:0 0 45px;
                    border-radius:50%;
                    border:1px solid #fff;
                    box-sizing:border-box;
                }
                .top-center{
                    flex:1;
                    margin-left:20px;
                    color:@color-alert-title;
                    display:flex;
                    flex-direction:column;
                    justify-content:space-between;
                    .phone{
                        flex:3;
                        font-size:18px;
                        letter-spacing:1px;
                        height:30px;
                    }
                    .text{
                        flex:2;
                        font-size:12px;
                    }
                }
                .top-right{
                    i{
                        line-height:45px;
                        font-size:30px; 
                    }
                }
            }
        }
        //中间列表页
        .center-main{
            ul{
                padding:0 20px; 
                .item{
                    display:flex;
                    height:50px;
                    line-height:50px;
                    box-sizing:border-box;
                    border-bottom:1px solid @color-alert-line;
                    &:last-child{
                        border:none;
                    }
                    .front{
                        flex:0 0 30px;
                        font-size:20px;
                        vertical-align:middle;
                    }
                    .text{
                        flex:1;
                        font-size:14px;
                    }
                    .back{
                        flex:0 0 50px;
                        text-align:right;
                        color:@color-alert-gray;
                    }
                }
            }
        }
    }
    
</style>
